<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>股票行业分类系统</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
        h1 { color: #333; }
        .container { max-width: 1200px; margin: 0 auto; }
        .search-box { margin: 20px 0; }
        input[type="text"] { padding: 8px; width: 300px; }
        button { padding: 8px 15px; background: #4CAF50; color: white; border: none; cursor: pointer; }
        .industry-list { display: flex; flex-wrap: wrap; }
        .industry-card { border: 1px solid #ddd; margin: 10px; padding: 15px; width: 200px; }
        .industry-name { font-weight: bold; font-size: 18px; }
        .stock-count { color: #666; margin-top: 5px; }
        a { text-decoration: none; color: #0066cc; }
        .search-options { margin-top: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>股票行业分类系统</h1>

        <div>
        <span id="stock-total"></span>
        <button onclick="showStockList()">查看全部A股列表</button>
        </div>
        <div id="stock-list-modal" style="display:none;"></div>
        <div>
        <button id="sync-btn" onclick="syncStocks()">同步股票数据</button>
        <span id="sync-status"></span>
        </div>
        
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="搜索行业或股票...">
            <div class="search-options">
                <label>
                    <input type="radio" name="searchType" value="industry" checked> 搜索行业
                </label>
                <label>
                    <input type="radio" name="searchType" value="stock"> 搜索股票
                </label>
            </div>
            <button onclick="search()">搜索</button>
        </div>
        
        <div class="industry-list" id="industryList">
            {% for name, industry in industries.items() %}
            <div class="industry-card">
                <div class="industry-name">{{ name }}</div>
                <div class="stock-count">股票数量: {{ industry.get_stock_count() }}</div>
                <a href="/industry/{{ name }}">查看详情</a>
            </div>
            {% endfor %}
        </div>
    </div>
    
    <script>
        // 同步股票数据
        function syncStocks() {
        const btn = document.getElementById('sync-btn');
        const status = document.getElementById('sync-status');
        
        btn.disabled = true;
        status.textContent = '同步中...';
        
        fetch('/api/sync_stocks')
            .then(response => response.json())
            .then(data => {
            status.textContent = '同步成功';
            setTimeout(() => status.textContent = '', 3000);
            })
            .catch(error => {
            status.textContent = '同步失败';
            console.error(error);
            })
            .finally(() => {
            btn.disabled = false;
            });
        }

        function search() {
            const query = document.getElementById('searchInput').value;
            const searchType = document.querySelector('input[name="searchType"]:checked').value;
            
            if (searchType === 'industry') {
                // 搜索行业
                fetch(`/api/search?query=${query}`)
                    .then(response => response.json())
                    .then(data => {
                        const industryList = document.getElementById('industryList');
                        industryList.innerHTML = '';
                        
                        if (data.length === 0) {
                            industryList.innerHTML = '<p>没有找到匹配的行业</p>';
                            return;
                        }
                        
                        data.forEach(industry => {
                            const card = document.createElement('div');
                            card.className = 'industry-card';
                            card.innerHTML = `
                                <div class="industry-name">${industry.name}</div>
                                <div class="stock-count">股票数量: ${industry.count}</div>
                                <a href="/industry/${industry.name}">查看详情</a>
                            `;
                            industryList.appendChild(card);
                        });
                    });
            } else {
                // 搜索股票
                fetch(`/api/search_stock?query=${query}`)
                    .then(response => response.json())
                    .then(data => {
                        const industryList = document.getElementById('industryList');
                        industryList.innerHTML = '';
                        
                        if (data.length === 0) {
                            industryList.innerHTML = '<p>没有找到匹配的股票</p>';
                            return;
                        }
                        
                        // 按行业分组显示股票
                        const stocksByIndustry = {};
                        data.forEach(stock => {
                            if (!stocksByIndustry[stock.industry]) {
                                stocksByIndustry[stock.industry] = [];
                            }
                            stocksByIndustry[stock.industry].push(stock);
                        });
                        
                        // 为每个行业创建一个卡片
                        for (const [industry, stocks] of Object.entries(stocksByIndustry)) {
                            const card = document.createElement('div');
                            card.className = 'industry-card';
                            card.style.width = '300px';
                            
                            let stocksHtml = '';
                            stocks.forEach(stock => {
                                stocksHtml += `<div>${stock.code} - ${stock.name}</div>`;
                            });
                            
                            card.innerHTML = `
                                <div class="industry-name">${industry}</div>
                                <div class="stock-count">找到 ${stocks.length} 只股票</div>
                                <div style="margin-top: 10px;">${stocksHtml}</div>
                                <a href="/industry/${industry}">查看行业详情</a>
                            `;
                            industryList.appendChild(card);
                        }
                    });
            }
        }
    
    fetch('/api/stock_count').then(r=>r.json()).then(data=>{
  document.getElementById('stock-total').innerText = 'A股总数：' + data.total;
});
function showStockList() {
  fetch('/api/stock_list').then(r=>r.json()).then(data=>{
    let html = '<table><tr><th>代码</th><th>名称</th><th>最新价</th></tr>';
    for(const s of data.stocks){
      html += `<tr><td>${s["代码"]}</td><td>${s["名称"]}</td><td>${s["最新价"]}</td></tr>`;
    }
    html += '</table>';
    document.getElementById('stock-list-modal').innerHTML = html;
    document.getElementById('stock-list-modal').style.display = 'block';
  });
}
    
    </script>
</body>
</html>